<template>
	<view class="body">
		<view class="heand">
			<input @click="jilu" class="hinput" placeholder="裝自配电箱"></input>
			<image class="sosouicon" src="../../static/img/sousuo%20.png"></image>
		</view>
		<view class="jilu">
			<text class="jilutxt">搜索记录</text>
			<image @click="delSearch" class="deleicon" src="../../static/img/dele.png"></image>
		</view>
		<view class="lishi">
			<view class="geti" v-for="(item, index) in list" :key="index">
				<view @click="tiaozhuang" class="text">{{item.keyword}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				keyword:'',
				list:''
			};
		},
		methods: {
			delSearch () {
				uni.showModal({
					content: "你确定要删除搜索记录吗？",
					confirmText: "确定",
					cancelText: "取消",
					success:(res) => {
						if (res.confirm) {
							uni.request({
								url: 'http://xj.gccrw.cn/api/app/delSearch', 
								data: {	
								},
								 method: "POST",
								success: () => {
									uni.navigateBack({
										delta:1,
										success:(res) => {
											uni.showToast({
												title: '删除成功',
											})
										}
									})
								}
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				})
			},
			getData () {
				uni.request({
					url: 'http://xj.gccrw.cn/api/app/searchRecord', 
					method: "POST",
					success: (res) => {
						console.log('-------111111111111-------',res.data.data);
						this.list = res.data.data
					}
				})
			},
			jilu () {
				uni.navigateTo({
					url:'/pages/details/details'
				})
			},
			tiaozhuang () {
				uni.navigateTo({
					url:'/pages/details/details'
				})
			}
		},
		onShow () {
			this.getData()
		}
	}
</script>

<style>
.heand {
	width: 100%;
	background-color: #3C6DD2;
	height: 76upx;
	display: flex;
	align-items: center;
	justify-content: center;
	/* position: relative; */
	height: 118upx;
}
.hinput {
    background-color: #FFFFFF;
	width: 90%;
	border-radius: 10upx;
	padding-left: 50upx;
	font-size: 30upx;
	text-align: center;
	height: 70upx;
	position: relative;
}
.sosouicon {
	width: 30upx;
	height: 30upx;
	z-index: 9999;
	margin-left: -110upx;
	position: absolute;
}
.searchtext {
	color: #FFFFFF;
}
.deleicon {
	width: 40upx;
	height: 40upx;
}
.jilu {
	display: flex;
	margin: 5%;
	justify-content: space-between;
}
.lishi {
	display: flex;
	margin: 3%;
	width: 90%;
	flex-wrap: wrap;
}
.geti {
	width: 30%;
	margin: 10upx;
}
.text {
	font-size: 26upx;
	color: #B1B1B1;
	border: 2upx solid #DADADA;
	padding: 10upx;
	text-align: center;
}
.jilutxt {
	font-weight: bold;
	font-size: 34upx;
}
</style>
